<template>
    <div class='camera'>
      <!--拍照倒计时-->
        <div class="timephoto" v-if="!istimerEnd">
            <div class="frame">
            </div>
            <div class="time"><span>{{ timevalue }}</span>
            </div>
            <div class="prompt font42">请将脸部对准方框哦</div>
        </div>
      <!--拍照后显示页面-->
        <div class="photoC" v-if="istimerEnd">
            <div class="flip-container">
                <div class="flipper">
                    <div class="front curPhoto">here is content : AA</div>
                    <div class="back qrcodeDiv">here is content : BB</div>
                </div>
            </div>
            <div class="photoBtns font42" v-if="isfront">
                <div class="close">关闭</div>
                <div class="check">查看商品</div>
                <div class="download" @click="goQRcode()">下载图片</div>
            </div>
            <div class="photoBtns font42" v-else>
                <div class="backPhoto" @click="backPhoto()">返回照片</div>
                <div class="goonMP">继续试妆</div>
            </div>
        </div>
    </div>
</template>
<script>
    import photoC  from './camera/photoC.vue'
    import timePhoto  from './camera/timephoto.vue'
    import check  from './camera/check.vue'
    export default {
        props: {
        },
        data(){
            return {
                timevalue:3,
                isfront: true,
                istimerEnd:false
            }
        },
        beforeCreate(){
        },
        created(){
        },
        beforeMount(){
        },
        mounted(){
            this.start();
        },
        beforeDestroy(){
        },
        destroyed(){
        },
        methods: {
            start: function(){
                var _that=this;
                var timer=setInterval(function(){
                    _that.timevalue--;
                    if(_that.timevalue<=0){
                        clearInterval(timer);
                        _that.istimerEnd=true;
                    }
                },1000)
            },
            goQRcode: function () {
                $('.flipper').css('transform', "rotateY(180deg)")
                this.isfront=false;
            },
            backPhoto: function () {
//              alert(1);
                $('.flipper').css('transform', "");
                this.isfront=true;
            }
        },
        components: {
            photoC,
            timePhoto,
            check
        }
    }
</script>
<style scoped>
    /*--查看照片*/
    .flip-container {
        width: 10rem;
        height: 11.82rem;
        position: absolute;
        bottom: 3.42rem;
        left: 9rem;
        /*-webkit-perspective: 10rem;*/
        /*perspective: 10rem;*/
        transform-style: preserve-3d; /*重要*/
        /*overflow: hidden;*/
    }

    .flipper {
        position: relative;
        width: 10rem;
        height: 11.82rem;
        transition: 0.6s;
        transform-style: preserve-3d; /*重要*/
    }

    /* 触发翻转 */

    .front, .back {
        position: absolute;
        top: 0;
        left: 0;
        backface-visibility: hidden; /*重要*/
        width: 10rem;
        height: 11.82rem;
        background: red;
    }

    .front {
        transform: rotateY(0deg);
        z-index: 2;
        background-color: black;
    }

    .back {
        transform: rotateY(-180deg);
        background-color: red;

    }

    .photoBtns {
        position: absolute;
        left: 19.66rem;
        height: 4.86rem;
        width: 3.5rem;
        bottom: 10.38rem;
    }

    .photoBtns div {
        border: 0.05rem solid #ffffff;
        width: 3.4rem;
        height: 1.2rem;
        margin-bottom: 0.48rem;
        text-align: center;
        line-height: 1.2rem;
        cursor: pointer;
    }

    .frame{
        opacity:0.68;
        background:#ffffff;
        width:10rem;
        height:11.82rem;
        position: absolute;
        left: 10rem;
    }
    .time{
        border:0.04rem solid #ffffff;
        width:4.96rem;
        height:4.96rem;
        border-radius:100%;
        position: absolute;
        bottom: 7.45rem;
        right: 2.97rem;
        text-align: center;
        line-height: 4.96rem;
    }
    .time span{
        opacity:0.6;
        font-family:DINCondensed-Bold;
        font-size: 3.6rem;
        color:#ffffff;
        letter-spacing:0px;
        text-align: left;
    }
    .prompt{
        font-family:DFPHeiW5;
        color:#ffffff;
        width: 4.35rem;
        height: 0.42rem;
        letter-spacing:0.063rem;
        text-align:left;
        position: absolute;
        bottom: 6.28rem;
        right: 3.3rem;
    }
</style>
